<template>
	<view class="w-full px-14 flex-col flex-a-c relative pt-20 pb-50">
		<view class="w-full px-18 h-50n">
			<view class="bg-theme h-full w-full flex round-10 p-18 pl-32 flex-a-c">
				<view class="h-full flex-center">
					<text class="iconfont icon-daojishi textffeec0 text-size-130"></text>
				</view>
				<view class="h-full bgfff w-6 mx-40"></view>
				<view class="flex-col textffeec0 font-bold">
					<text class="text-size-26 mb-4">投票倒计时</text>
					<view class="pl-8n mb-14">
						<uni-countdown :day="1" color="#ffeec0" splitorColor="#ffeec0" :hour="1" :minute="12"
							:second="40" :show-colon="false"></uni-countdown>
					</view>
					<text class="text-size-26 mb-4">投票须知</text>
					<view class="pl-8n text-size-20">
						<text>{{votesInfo?.need_know??''}}</text>
					</view>

				</view>
			</view>
		</view>
		<view class="w-full px-18 mt-20">
			<view class="bg-theme w-full flex-col round-10 py-18 px-4 flex-a-c textffeec0">
				<view class="h-full w-full flex flex-j-b flex-a-c font-bold">
					<view class="flex-col flex-1 flex-center">
						<text>参投数量</text>
						<text>{{ votesInfo?.item_count??0 }}</text>
					</view>
					<view class="h-20n bgfff w-6 mx-2n"></view>
					<view class="flex-col flex-1 flex-center">
						<text>投票总数</text>
						<text>{{ votesInfo?.vote_count??0 }}</text>
					</view>
					<view class="h-20n bgfff w-6 mx-2n"></view>
					<view class="flex-col flex-1 flex-center">
						<text>访问量</text>
						<text>{{ votesInfo?.view_count??0 }}</text>
					</view>
				</view>
				<uni-search-bar class="w-full mt-20" radius="10" placeholder="输入编号或名称搜索" clearButton="none"
					cancelButton="none" @input="onInput" />
			</view>
		</view>
		<view class="w-full mt-40 flex px-16 flex-wrap flex-j-b" v-if="itemList.length>0">
			<view class="bgc2c2c2 round-60 w-full">
				<view class="bgffeec0 round-60 box-full relative p-16 pb-30" style="margin-top: -8px;">
					<view class="bg-theme round-60 w-full p-24">
						<view class="w-full flex-col flex-a-c round-20 mb-16 relative bgfff"
							v-for="(item,index) in itemList" :key="item.id">
							<view class="w-full flex fle-a-c p-18 flex font-weight-500">
								<image class="w-40n h-40n round-18" :src="item.image" mode="aspectFill"></image>
								<view class="mx-20 h-40n flex-1">
									<view class="flex flex-j-b flex-a-c text-size-26 mb-4">
										<span>{{ item.title }}</span>
										<span>票数 {{ item.vote_count }}</span>
									</view>
									<view class="text-size-24 text-overflow-4">
										简介：{{ item.content }}
									</view>
								</view>
								<view class="vertical-text round-18 flex-center text-size-28 px-6"
									:class="item.isVote?'bga9a297':'bg-theme'" @click.stop="onVote(item, index)">
									{{item.isVote?'已投票':'立即投票'}}
								</view>
							</view>
						</view>
					</view>
				</view>

			</view>
		</view>
		<uni-load-more :status="loadStatus"></uni-load-more>
		<view class="fixed r-30 b-50n z-index-18">
			<image src="@/static/image/share.png" class="w-30n z-index-12" mode="widthFix"></image>
		</view>
	</view>
</template>

<script setup>
	import {
		voteList,
		vote
	} from '@/network/api.js'
	import {
		useThreadInfo,
	} from '@/hooks'
	import {
		debounce
	} from '@/static/js/common.js'
	const { getThreadInfo } = useThreadInfo()
	const votesInfo = ref()
	const day = ref(0)
	const hour = ref(0)
	const minute = ref(0)
	const second = ref(0)
	const itemList = ref([])
	const loadStatus = ref('loading')
	const param = reactive({
		page: 1,
		limit: 15,
		keyword: undefined
	})

	// tab点击
	const onClickTabItem = (e) => {
		console.log(e)
	}

	// 获取店铺列表
	const getItemList = async () => {
		loadStatus.value = 'loading'
		const res = await voteList(votesInfo.value.id, {
			...param
		})
		if (res.status === 200) {
			const result = res.data.list.map(item => {
				return {
					...item,
					isVote: res.data.user_voted.includes(item.id)
				}
			})
			itemList.value = itemList.value.concat(result)
			loadStatus.value = res.data.list.length > 0 ? 'more' : 'noMore'
		} else {
			uni.showToast({
				title: res.msg,
				icon: 'none'
			})
			loadStatus.value = 'more'
		}
	}
	// 获取活动详情
	const getThreadInfoFun = async () => {
		const res = await getThreadInfo()
		day.value = res.time.day
		hour.value = res.time.hour
		minute.value = res.time.minute
		second.value = res.time.second
		votesInfo.value = res.votesInfo
		getItemList()
	}
	const onFlushed = (e) => {
		param.keyword = e
		param.page = 1
		itemList.value = []
		getItemList()
	}
	// 输入框值改变
	const onInput = (e) => {
		debounce(onFlushed(e), 300)
	}
	//投票
	const onVote = async (item, index) => {
		if (item.isVote) return
		uni.showLoading({
			title: '正在投票'
		})
		const res = await vote({
			item_id: item.id,
			vote_id: item.thread_vote_id
		})
		uni.hideLoading()
		if (res.status === 200) {
			itemList.value[index].isVote = true
			uni.showToast({
				title: '投票成功',
				icon: 'none'
			})
		} else uni.showToast({
			title: res.msg,
			icon: 'none'
		})
	}
	// 页面触底
	onReachBottom(() => {
		if (loadStatus.value === 'more') {
			param.page++
			getItemList()
		}
	})
	onShow(() => {
		getThreadInfoFun()
	})
</script>

<style scoped lang="scss">
	.text097b7d {
		color: #097b7d;
	}

	.textffeec0 {
		color: #ffeec0;
	}

	.text-size-130 {
		font-size: 150rpx;
	}

	.bgfff81d {
		background: #fff81d;
	}

	.vertical-text {
		writing-mode: vertical-rl;
		/* 从上到下显示 */
		text-orientation: upright;
		/* 让文字保持正向显示 */
		white-space: nowrap;
		box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.2);
	}

	.bgffeec0 {
		background: #ffeec0;
	}

	.bgc2c2c2 {
		background: #c2c2c2;
	}

	.bga9a297 {
		background: #a9a297;
	}
</style>